<template>
  <div>
    <div v-show="showContent == 1">
      <table class="info-table">
        <tr>
          <td>客户：{{orderInfo.contName}}</td>
          <td>最终客户：{{orderInfo.custName}}</td>
          <td>加工类型：{{getType(orderInfo.workInstCd)}}</td>
          <td>接单时间：{{$store.getters.getDate(orderInfo.soDate, 2)}}</td>
        </tr>
        <tr>
          <td>接单号：{{orderInfo.soNo}}</td>
          <td>营业员：{{orderInfo.sUserName}}</td>
          <td>发件人：{{orderInfo.entryUserName}}</td>
          <td>交期时间：{{$store.getters.getDate(orderInfo.contDueDate, 2)}}</td>
        </tr>
      </table>
      <el-table
        border
        ref="table"
        @selection-change="selectChange"
        :row-class-name="tableRowClassName"
        :data="lists">
        <el-table-column
          type="selection"
          :selectable='checkboxT'
          width="55">
          <!--<template slot-scope="scope">-->
            <!--<el-checkbox :disabled="scope.$index <= 2"></el-checkbox>-->
          <!--</template>-->
        </el-table-column>
        <el-table-column
          label="接单行号">
          <template slot-scope="scope">
            {{scope.row.soNo + '-' + scope.row.soLnNo}}
          </template>
        </el-table-column>
        <el-table-column
          prop="soQty"
          align="right"
          label="指示数量">
        </el-table-column>
        <el-table-column
          prop="soWt"
          align="right"
          label="重量">
        </el-table-column>
        <el-table-column
          label="是否完成">
          <template slot-scope="scope">
            {{scope.row.status == 1? '已完成': '未完成'}}
          </template>
        </el-table-column>
        <el-table-column
          label="已打印">
          <template slot-scope="scope">
            {{scope.row.isDelivery == 1? '是': '否'}}
          </template>
        </el-table-column>
      </el-table>
      <p class="btn">
        <el-button @click="looking" type="primary">预览</el-button>
        <el-button @click="historyList" type="primary">历史记录</el-button>
      </p>
    </div>
    <div class="table-line-height" v-show="showContent == 2">
      <p class="btn">
        <el-button id="bunt" v-print="'#printContent'" type="primary">打印</el-button>
        <el-button @click="printing" type="primary">打印</el-button>
        <el-button @click="showContent = 1; clickHost = false; selectValue = []" type="primary">返回</el-button>
      </p>
      <br/><br/>
      <div v-if="orderDetail.length > 0" id="printContent">
        <div style="height:1490px;page-break-after: always;" v-for="(deliveryItem, deliveKey) in dataLists" :key="'cdb' + deliveKey">
          <table class="table">
            <tr>
              <td rowspan="3" valign="top" align="right" style="position: relative; font-size: 23px;">
                <img class="logo" src="../../../static/images/logo.jpg" alt="">
                日立金属（东莞）特殊钢有限公司 本部</td>
              <td>
                <span>邮编：</span>523380
                <span style="width: 190px;">HMDS-QR-49-1/A0</span>
                <span style="width: 60px;">page：</span>{{deliveKey + 1}}/{{dataLists.length}}
              </td>
            </tr>
            <tr>
              <td>
                <span>电话：</span>86-769-8640-6726
                <span style="width: 60px;">传真：</span>86-769-8640-6716
              </td>
            </tr>
            <tr>
              <td>
                <span>地址：</span>广东省东莞市茶山镇茶山工业园
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span style="width: 90px;">致：</span>{{orderDetail[0].contKname}}
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span>货送至：</span>{{orderDetail[0].shipToName}}
              </td>
            </tr>
            <tr>
              <td>
                <span><p>&nbsp;</p></span>{{orderDetail[0].shipToNameAdd}}
              </td>
              <td style="position: relative;">
                <span>账号：</span>{{orderDetail[0].sBarnchUserDef1}}
                <span class="sign" v-if="orderDetail[0].labelName">
                  {{orderDetail[0].labelName}}
                </span>
              </td>
            </tr>
            <tr>
              <td>
                <span><p>&nbsp;</p></span>{{orderDetail[0].shipToAddress1}}
              </td>
              <td>
                <span><p>&nbsp;</p></span>{{orderDetail[0].sBarnchUserDef2}}
              </td>
            </tr>
            <tr>
              <td> <span><p>&nbsp;</p></span>{{orderDetail[0].shipToAddress2}}</td>
              <td>
                <span>营业员：</span>{{orderDetail[0].sUserName}}
              </td>
            </tr>
            <tr>
              <td> <span><p>&nbsp;</p></span>{{orderDetail[0].shipToAddress3}}</td>
              <td>
                <span>送货单号：</span>{{orderDetail[0].orderCode}}
                <span>日期：</span>{{$store.state.date.replace('年', '/').replace('月', '/').replace('日', '')}}
              </td>
            </tr>
          </table>
          <div class="title">
            <span>电话：{{orderDetail[0].shipToTelno}}</span>
            <h2>送货单</h2>
          </div>
          <table border="0" class="table-list">
            <thead>
            <tr>
              <td></td>
              <td colspan="7">产品规格说明</td>
            </tr>
            <tr>
              <td>项目</td>
              <td>订单号</td>
              <td>接单号</td>
              <td>单位</td>
              <td style="text-align: right;">数量(件)</td>
              <td style="text-align: right;">重量(KG)</td>
              <td style="text-align: right;">接单单价(RMB)</td>
              <td style="text-align: right;">金额(RMB)</td>
            </tr>
            <tr>
              <td></td>
              <td colspan="6">备注</td>
              <td>最终客户订单</td>
            </tr>
            </thead>
            <tbody v-for="(item, key) in deliveryItem" :key="key">
            <tr>
              <td></td>
              <td colspan="7">{{item.specExternalNote}}</td>
            </tr>
            <tr>
              <td>{{item.NO}}</td>
              <td>{{item.contPoNo}}</td>
              <td>{{item.soNo + '-' + item.soLnNo}}</td>
              <td>{{getPeice(item.unitPriceCd)}}</td>
              <td  style="text-align: right;">{{item.soQty}}</td>
              <td  style="text-align: right;">{{$store.getters.toThousand(item.soWt, 2)}}</td>
              <td  style="text-align: right;">{{orderInfo.isShowAmount? $store.getters.toThousand(item.soUnitPrice, 2) : ''}}</td>
              <td  style="text-align: right;">
                {{orderInfo.isShowAmount? $store.getters.toThousand(getTotal(item), 2): ''}}
              </td>
            </tr>
            <tr>
              <td></td>
              <td colspan="6">
                {{item.lineRemarks}}
                {{orderInfo.relationMoth ? item.chargeNo + '' + item.stockSizeNote: ''}}
              </td>
              <td>{{item.custPoNo}}&nbsp;</td>
            </tr>
            </tbody>
            <template v-if="(deliveKey + 1) == dataLists.length">
              <tr class="total-tr" v-if="orderInfo.isShowAmount">
              <td></td>
              <td></td>
              <td>合计</td>
              <td></td>
              <td style="text-align: right;">{{numTotal}}</td>
              <td style="text-align: right;">
                {{$store.getters.toThousand(wetTotal, 2)}}
              </td>
              <td></td>
              <td style="text-align: right;">{{orderInfo.isShowAmount? $store.getters.toThousand(mnyTotal, 2): ''}}</td>
            </tr>
              <tr class="total-tr" v-else>
              <td></td>
              <td></td>
              <td>合计</td>
              <td></td>
              <td style="text-align: right;">{{numTotal}}</td>
              <td style="text-align: right;">
                {{$store.getters.toThousand(wetTotal, 2)}}
              </td>
              <td></td>
              <td style="text-align: right;"></td>
            </tr>
            </template>
          </table>
          <div v-if="(deliveKey + 1) == dataLists.length" class="bottom">
            <p>注意：<br/>{{lists[0].paymentMethodDesc}}</p>
            <p>
              <span>
                客户公章 (
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 )
<!--<span class="date-line"></span>年<span class="date-line"></span>月<span class="date-line"></span>日-->
              </span>
              <span>日立金属（东莞）特殊钢有限公司</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      width="250px"
      title="历史记录"
      append-to-body
      :visible.sync="historyListShow">
      <ul class="listHistory">
        <li @click="toHistory(item.data)" v-for="(item, index) in historyLists" :key="index">
          {{item.printCode}}
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'orderDetail',
  props: ['orderInfo'],
  data () {
    return {
      historyListShow: false,
      historyLists: [],
      orderDetail: [],
      showContent: 1,
      selectValue: [],
      dataLists: [],
      clickHost: false,
      lists: [],
      numTotal: 0,
      wetTotal: 0,
      mnyTotal: 0
    }
  },
  created () {
    this.getData()
  },
  watch: {
    orderInfo () {
      this.getData()
      this.clickHost = false
    }
  },
  methods: {
    checkboxT (row, rowIndex) {
      if (row.isDelivery === '1') {
        return 0
      } else {
        return 1
      }
    },
    // 已打印变灰
    tableRowClassName ({row, rowIndex}) {
      if (row.isDelivery === '1') {
        return 'isgray'
      }
    },
    // 历史记录详情
    toHistory (data) {
      this.clickHost = true
      this.selectValue = JSON.parse(data)
      console.log('历史详情', this.dataLists)
      this.historyListShow = false
      this.looking()
      // setTimeout(() => {
      //   this.showContent = 2
      // }, 1000)
    },
    // 查看历史记录
    historyList () {
      this.historyListShow = true
      this.http('/printHistory/list', {
        soNo: this.orderInfo.soNo,
        printType: '4'
      }).then(resp => {
        console.log('历史记录', resp)
        if (resp.success) {
          this.historyLists = resp.data.list
        }
      })
    },
    // 获取订单类型
    getType (numb) {
      if (numb === '1') return '整条'
      if (numb === '2') return '切断'
      if (numb === '3') return '切断&加工'
      if (numb === '5') return '热处理'
      if (numb === '6') return '切断&加工&热处理'
    },
    // 默认选中
    toggleRow (row) {
      this.$refs.table.toggleRowSelection(row, true)
    },
    // 表格选择
    selectChange (val) {
      this.selectValue = val
    },
    getData () {
      this.http('/tSalesOrder/getDeliveryPrintData', {
        // soNo: 100341398
        soNo: this.orderInfo.soNo,
        workInstCd: this.orderInfo.workInstCd
      }).then(resp => {
        if (resp.success) {
          console.log('送货单', resp)
          this.selectValue = []
          this.lists = resp.data
          // resp.data.map(item => {
          //   if (item.status === 1) {
          //     this.selectValue.push(item)
          //     this.$nextTick(() => {
          //       this.toggleRow(item)
          //     })
          //   }
          // })
          resp.data.map(item => {
            if (item.isDelivery !== '1' && item.status === 1) {
              this.selectValue.push(item)
              this.$nextTick(() => {
                this.toggleRow(item)
              })
            }
          })
        } else {
          this.$message.error(resp.message)
        }
      })
    },
    // 获取单位
    getPeice (a) {
      if (a === '2') return 'KG'
      if (a === '7') return '個'
      if (a === '8') return '件'
    },
    // 计算总金额
    getTotal (item) {
      if (this.orderInfo.isShowAmount) {
        if (item.unitPriceCd === '2') {
          return item.soUnitPrice * 10 * item.soWt / 10
          // if (item.itemName2) {
          //   if (item.itemName2.indexOf('实际') > -1) {
          //     let momen = item.actualWeight === null ? 0 : item.actualWeight
          //     let out = item.outWeight === null ? 0 : item.outWeight
          //     return item.soUnitPrice * (momen + out)
          //   } else {
          //     return item.soUnitPrice * item.soWt
          //   }
          // } else {
          //   return item.soUnitPrice * item.soWt
          // }
        } else {
          return item.soUnitPrice * 10 * item.soQty / 10
        }
      } else {
        return '*'
      }
    },
    keeyHistory (obj) {
      let data = JSON.stringify(this.selectValue)
      this.http('/printHistory/saveOrUpdate', {
        soNo: obj,
        printCode: this.orderDetail[0].orderCode,
        data,
        printType: '4'// 1为切断指示书，2为加工指示书，3为热加工指示书
      }).then(resp => {
        if (resp.success) {
          console.log('执处理送货单打印成功！')
        } else {
          this.$message.error({
            message: '失败：' + resp.message,
            duration: 1000
          })
        }
      })
    },
    // 打印
    printing () {
      let parameters = []
      let str = ''
      this.orderDetail.map(item => {
        str = item.soNo
        parameters.push({
          soNo: item.soNo,
          soLnNo: item.soLnNo,
          workInstCd: item.workInstCd
        })
      })
      // console.log(parameters)
      if (!this.clickHost) {
        this.http('/tSalesOrder/isDelivery', parameters).then(resp => {
          console.log(resp)
          // if (resp.success) {
          //   document.getElementById('bunt').click()
          // }
          // console.log(resp)
          if (resp.success) {
            document.getElementById('bunt').click()
            this.keeyHistory(str)
          } else {
            this.$message.error(resp.message)
          }
        })
      } else {
        document.getElementById('bunt').click()
      }
    },
    // 预览
    looking () {
      this.numTotal = 0
      this.wetTotal = 0
      this.mnyTotal = 0
      this.orderDetail = this.selectValue.map((item, index) => {
        this.numTotal = this.numTotal + item.soQty
        this.wetTotal = this.wetTotal + item.soWt
        this.mnyTotal = this.mnyTotal + this.getTotal(item)
        item.NO = index + 1
        return item
      })
      this.showContent = 2
      console.log(this.orderDetail)
      // let ar = [1, 2, 3, 4, 5, 6, 7, 8, 9]
      this.dataLists = []
      for (let i = 0; i < this.orderDetail.length; i += 16) {
        this.dataLists.push(this.orderDetail.slice(i, i + 16))
      }
      // console.log(this.dataLists)
    }
  }
}
</script>

<style scoped>
  * {
    /*font-family: 宋体;*/
    font-size: 19px;
    line-height: 21px;
  }
  .date-line {
    display: inline-block;
    width: 40px !important;
    float: none !important;
    border-top: none !important;
    /*border-bottom: 1px solid #000;*/
  }
  .logo {
    width: 100px;
    position: absolute;
    left: 30px;
    bottom: 0px;
  }
  .table-line-height {
    /*line-height: 30px;*/
  }
  .info-table {
    width: 100%;
    margin-bottom: 20px;
  }
  .info-table td {
    padding: 7px 0;
    color: #666;
  }
  #bunt {
    display: none;
  }
  #printContent {
    /*min-height: 1500px;*/
    padding-bottom: 70px;
    position: relative;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    width: 1070px;
  }
  .bottom p:nth-child(1){
    text-align: center;
    margin-bottom: 70px;
  }
  .bottom p span:nth-child(1) {
    float: left;
    border-top: 1px solid #000;
    width: 300px;
    padding-top: 10px;
    text-align: center;
    position: absolute;
    bottom: 0;
  }
  .bottom p span:nth-child(2) {
    float: right;
    border-top: 1px solid #000;
    width: 300px;
    padding-top: 10px;
    text-align: center;
    position: relative;
    bottom: 0px;
  }
  table {
    width: 1075px;
  }
  .table td {
    width: 50%;
  }
  .table td span {
    width: 110px;
    display: inline-block;;
    text-align: right;
    margin-right: 10px;
  }
  .table-list {
    border-collapse: collapse;
  }
  .table-list td{
    text-align: left;
  }
  .table-list thead {
    border: 1px solid #000;
  }
  .table-list tbody{
    padding: 5px;
    border: 1px solid #000;
    border-top: none;
  }
  .table-list th {
    /*padding: 3px;*/
    background: #efefef;
    text-align: left;
  }
  .table-list th:nth-child(1) {
    text-align: center;
  }
  .table-list td:nth-child(1) {
    text-align: center;
  }
  .p-spans span{
    width: 30px;
    display: inline-block;
  }
  .p-spans span:last-child {
    width: 50px;
  }
  .title {
    text-align: center;
    margin: 20px 0 5px 0;
    width: 1075px;
  }
  .title h2 {
    font-size: 30px;
  }
  .title span {
    float: left;
    position: absolute;
    left: 40px;
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
  .total-tr td {
    padding-top: 10px;
  }
  .listHistory li {
    list-style: none;
    line-height: 30px;
    cursor: pointer;
  }
  .sign {
    width: 50px !important;
    height: 50px;
    line-height: 50px;
    text-align: center !important;
    font-size: 22px !important;
    position: absolute;
    right: 0px;
    font-weight: bold;
    top: 0px;
    color: #666;
    border: 2px solid #666;
    border-radius: 50%;
    font-family: 黑体;
  }
</style>
